﻿@layout TelerikLayout

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
        </div>

        <TelerikNotification @ref="@Notification.Instance" 
                             HorizontalPosition="@NotificationHorizontalPosition.Right"
                             VerticalPosition="@NotificationVerticalPosition.Top"
                             Class="big-notification">
        </TelerikNotification>
        <CascadingValue IsFixed="true" Value="@Notification">
            <div class="content px-4">
                @Body
            </div>
        </CascadingValue>
    </div>
</div>

@code{
    Notification Notification { get; set; } = new Notification();
}

<style>
    .big-notification .k-notification-container .k-notification-wrap {
        width: 350px;
        height: 100px;
    }

    .big-notification {
        z-index: 1234;
    }
</style>